<template>
  <div class="Course">
    <div class="nav">
      <img src="../../assets/01-1home.png">
      <span class="nav-contain">在授课程</span>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="content-top-1">
          <span class="top-1-msg">课程名 :</span>
          <input type="text"/>
        </div>
        <div class="content-top-2">
          <span class="top-2-msg">开始时间 :</span>
          <el-date-picker v-model="value1" type="date" class="datainput" clear-icon="el-icon-circle-close"></el-date-picker>
        </div>
        <div class="content-top-2">
          <span class="top-2-msg">结束时间 :</span>
          <el-date-picker v-model="value2" type="date" class="datainput"></el-date-picker>
        </div>
        <el-button type="primary" class="top-buttom-1">查询</el-button>
        <el-button type="primary" class="top-buttom-2">重置</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="num" label="序号" width="180" align="center"></el-table-column>
      <el-table-column prop="classname" label="课程名" width="448"></el-table-column>
      <el-table-column prop="starttime" label="开始时间" width="230"></el-table-column>
      <el-table-column prop="endtime" label="结束时间" width="230"></el-table-column>
      <el-table-column label="操作" width="130">
        <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      厦门理工学院 Â© 2017
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: '',
      tableData: [{
        num: 1,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 2,
        classname: '工程素质养成',
        date: '2016-05-04',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 3,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 4,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 5,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 6,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 7,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }, {
        num: 8,
        classname: '工程素质养成',
        starttime: '2018-01-22',
        endtime: '2018-02-28'
      }]
    }
  },
  methods: {
    indexMethod (index) {
      return index++
    }
  }
}
</script>
<style scoped>
.Course{
  background-color: #f0f2f5;
}
.nav{
  width: 77px;
  height: 17px;
  margin-left: 60px;
  padding-top: 27px;
  font-size: 14px;
  color: #a6a7a9;
}
.nav-contain {
  width: 58px;
  height: 17px;
  margin-left: 3px;
}

.content{
  background-color:#ffffff;
  width: 1240px;
  height: 595px;
  margin-top: 16px;
  margin-left: 60px;
}
.content-top{
  width: 1240px;
  height: 70px;
}
.content-top-1{
  width: 273px;
  height: 30px;
  padding-top: 20px;
  margin-left: 20px;
  float: left;
}
.content-top-2{
  float: left;
  width: 288px;
  height: 30px;
  padding-top: 16px;
  margin-left: 66px;
}
.top-1-msg{
  text-align: left;
}
.content-top-1 input{
  width: 206px;
  height: 28px;
}
.content-top-2 input{
  width: 206px;
  height: 28px;
}
.datainput{
  width: 206px;
  height: 28px;
}
.content-top-bottom{
  width: 136px;
  height: 34px;
  margin-top: 20px;
  margin-right: 90px;
  float: right;
}
.top-buttom-1{
  margin-top: 20px;
  margin-left: 38px;
  width: 64px;
  height: 34px;
  background-color: #009688;
  color: #ffffff;
  float: left;
}
.top-buttom-2{
  margin-top: 20px;
  margin-left: 8px;
  width: 64px;
  height: 34px;
  background-color: #ffffff;
  color: #8d8d8d;
  float: left;
}
.footer{
  font-size: 14px;
  color: #a0a0a0;
  margin-top: 50px;
  width: 100%;
  height: 50px;
  text-align: center;
}
</style>
